<template>
 <view class="my-search-container" :style="{'background-color':bgcolor}" @click="searchBoxHandler">
   <view class="my-search-box" :style="{'border-radius':radius+'px'}">
     <uni-icons type="search"></uni-icons>
     <text class="placehold" >搜索</text>
   </view>
 </view>
</template>

<script>
export default {
  name:"my-search",
  components: {
    
  },
  data() {
    return {
      
    };
  },
  methods:{
    searchBoxHandler(){
      this.$emit('clickSearch',{msg:'test'})
    }
  },
  props:{
    bgcolor:{
      type:String,
      default:'#c00000'
    },
    radius:{
      type:Number,
      default:15
    }
  }
}
</script>

<style lang="scss">
  .my-search-container {
    height: 50px;
    // background-color: #c00000;
    display: flex;
    align-items: center;
    padding: 0 10px;
    .my-search-box {
      height: 36px;
      background-color: #fff;
      width: 100%;
      // border-radius: 15px;
      display: flex;
      line-height: 36px;
      align-content: center;
      justify-content: center;
     .placehold {
       font-size: 15px;
       margin-left: 5px;
     }
    }
  }
</style>